import * as Vue from 'vue'
import { loadModule } from 'vue3-sfc-loader'
import less from 'less'
/**
 * 动态加载组件函数
 * 该函数用于根据配置动态加载远程组件，包括样式和Vue组件模块
 * @param widgetConfig 组件配置对象，包含样式和组件URL等信息
 * @returns 返回Promise，resolve加载成功的组件，reject加载失败的错误信息
 */
export function dynamicLoadComponent(widgetConfig: any) {
    return new Promise((resolve, reject) => {
        // 1. 加载样式（如果有）
        let stylePromise = Promise.resolve()
        if (widgetConfig.style) {
            stylePromise = fetch(widgetConfig.style)
                .then(res => {
                    if (!res.ok) {
                        throw new Error(`Failed to load style: HTTP ${res.status}`)
                    }
                    return res.text()
                })
                .then(lessContent => less.render(lessContent))
                .then(output => {
                    const style = document.createElement('style')
                    style.textContent = output.css
                    document.head.appendChild(style)
                })
        }

        // 2. 加载 Vue 模块
        const componentPromise = loadModule(widgetConfig.url, {
            moduleCache: { vue: Vue },
            async getFile(url: string) {
                const res = await fetch(url)
                if (!res.ok) {
                    throw new Error(`HTTP error ${res.status}: ${res.statusText}`)
                }
                return await res.text()
            },
            addStyle(styleText: string, scopeId: string) {
                const style = document.createElement('style')
                style.setAttribute('type', 'text/css')
                if (scopeId) {
                    style.setAttribute('data-scope-id', scopeId)
                }
                style.textContent = styleText
                document.head.appendChild(style)
            }
        })

        Promise.all([stylePromise, componentPromise])
            .then(([_, component]) => {
                resolve(component)
            })
            .catch(err => {
                reject(err)
            })
    })
}
